import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import {
  Table,
  Icon,
  Divider,
  Form,
  Select,
  DatePicker,
  Input,
  Card,
  Tag,
  Spin,
  Row,
  Col,
  Modal,
  Collapse,
  List,
  Radio,
  Badge,
} from 'antd';

import styles from './AntiFraudVerify.less';
import DescriptionList from 'components/DescriptionList';

const Panel = Collapse.Panel;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
const { Description } = DescriptionList;
const stateArray = ['否', '是'];


const customPanelStyle = {
  background: '#ECECEC',
  borderRadius: 4,
  marginBottom: 8,
  border: 0,
  overflow: 'hidden',
};

@connect(({ apply }) => ({
  apply,
}))
@Form.create()
export default class AntiFraudVerify extends PureComponent {
  state = {
    prodectId: '',
    customerId: '',
    name: '',
    idCard: '',
    mobile: '',
    historyByDay: 'd_7',
    historicalDate: {},
    queryHistoryDetails: null,
    queryHistory: false,
    antiFraudVerifyVisible: null,
    fraudDetails: null,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    const { item } = this.props;
    // console.log("AntiFraudVerify   this.propr.item", item)
    this.setState({
      antiFraudVerifyVisible: this.props.antiFraudVerifyVisible,
      fraudDetails: item,
    });
    // if (this.props.antiFraudVerifyVisible) {
    dispatch({
      type: 'apply/opposeCheat',
      payload: {
        projectId: item.projectId,
        customerId: item.customerId,
        name: item.customerName,
        idCard: item.customerIdCard,
        mobile: item.customerPhone,
      },
    });
    // }
  }

  handleChange = (value, data) => {
    this.setState({
      historyByDay: value,
    });
    switch (value) {
      case 'd_7':
        this.setState({
          queryHistoryDetails: data.d_7,
        });
        break;
      case 'd_15':
        this.setState({
          queryHistoryDetails: data.d_15,
        });
        break;
      case 'd_30':
        this.setState({
          queryHistoryDetails: data.d_30,
        });
        break;
      case 'd_60':
        this.setState({
          queryHistoryDetails: data.d_60,
        });
        break;
      case 'd_90':
        this.setState({
          queryHistoryDetails: data.d_90,
        });
        break;
      case 'm_4':
        this.setState({
          queryHistoryDetails: data.m_4,
        });
        break;
      case 'm_5':
        this.setState({
          queryHistoryDetails: data.m_5,
        });
        break;
      case 'm_6':
        this.setState({
          queryHistoryDetails: data.m_6,
        });
        break;
      case 'm_9':
        this.setState({
          queryHistoryDetails: data.m_9,
        });
        break;
      case 'm_12':
        this.setState({
          queryHistoryDetails: data.m_12,
        });
        break;
      case 'm_18':
        this.setState({
          queryHistoryDetails: data.m_18,
        });
        break;
      case 'm_24':
        this.setState({
          queryHistoryDetails: data.m_24,
        });
        break;
    }
  };

  handleInitializeDate = data => {
    if (!this.state.queryHistory) {
      this.setState({
        queryHistoryDetails: data.d_7,
        queryHistory: true,
      });
    }
  };

  renderSimpleFormDiv_7(data) {
    return (
      this.handleInitializeDate(data),
      (
        <Form>
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={12} sm={24}>
              <FormItem>
                <Select
                  showSearch
                  style={{ width: 300 }}
                  placeholder="请选择"
                  value={this.state.historyByDay}
                  onChange={value => this.handleChange(value, data)}
                >
                  <Option value="d_7">7天</Option>
                  <Option value="d_15">15天</Option>
                  <Option value="d_30">30天</Option>
                  <Option value="d_60">60天</Option>
                  <Option value="d_90">90天</Option>
                  <Option value="m_4">120天</Option>
                  <Option value="m_5">150天</Option>
                  <Option value="m_6">180天</Option>
                  <Option value="m_9">270天</Option>
                  <Option value="m_12">360天</Option>
                  <Option value="m_18">540天</Option>
                  <Option value="m_24">720天</Option>
                </Select>
              </FormItem>
            </Col>
            <Col md={12} sm={24}>
              <FormItem>
                {/* <Button type="primary" htmlType="submit" onClick={() => this.handleSubmitDiv_7(data)}>查询</Button> */}
              </FormItem>
            </Col>
          </Row>
        </Form>
      )
    );
  }

  columnsKey_1 = [
    {
      title: '序号',
      dataIndex: 'number',
      key: 'number',
      align: 'center',
      render: (text, recode, index) => {
        return index + 1;
      },
    },
    {
      title: '类别名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '次数',
      dataIndex: 'num',
      key: 'num',
      align: 'center',
    },
  ];

  columnsKey_2 = [
    {
      title: '序号',
      dataIndex: 'number',
      key: 'number',
      align: 'center',
    },
    {
      title: '类别名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: '次数',
      dataIndex: 'num',
      key: 'num',
      align: 'center',
    },
  ];

  columnsKey_3 = [
    {
      title: '使用过此手机的其他姓名',
      dataIndex: 'susp_name',
      key: 'susp_name',
      align: 'center',
      width: '50%',
    },
    {
      title: '最后使用时间',
      dataIndex: 'susp_updt',
      key: 'susp_updt',
      align: 'center',
      width: '50%',
    },
  ];

  columnsKey_4 = [
    {
      title: '使用过此手机的其他身份证',
      dataIndex: 'susp_idcard',
      key: 'susp_idcard',
      align: 'center',
      width: '50%',
    },
    {
      title: '最后使用时间',
      dataIndex: 'susp_updt',
      key: 'susp_updt',
      align: 'center',
      width: '50%',
    },
  ];

  columnsKey_5 = [
    {
      title: '提供数据的机构类型',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      width: '50%',
    },
    {
      title: '最后使用时间',
      dataIndex: 'userTime',
      key: 'userTime',
      align: 'center',
      width: '50%',
    },
  ];

  columnsKey_6 = [
    {
      title: '使用过此身份证的其他姓名',
      dataIndex: 'susp_name',
      key: 'susp_name',
      align: 'center',
      width: '50%',
    },
    {
      title: '最后使用时间',
      dataIndex: 'susp_updt',
      key: 'susp_updt',
      align: 'center',
      width: '50%',
    },
  ];

  columnsKey_7 = [
    {
      title: '使用过次身份证的其他手机',
      dataIndex: 'susp_phone',
      key: 'susp_phone',
      align: 'center',
      width: '30%',
    },
    {
      title: '最后使用时间',
      dataIndex: 'susp_updt',
      key: 'susp_updt',
      align: 'center',
      width: '30%',
    },
    {
      title: '运营名称',
      dataIndex: 'susp_phone_operator',
      key: 'susp_phone_operator',
      align: 'center',
      width: '20%',
    },
    {
      title: '归属地',
      dataIndex: 'susp_phone_province',
      key: 'susp_phone_province',
      align: 'center',
      width: '20%',
    },
  ];

  columnsKey_8 = [
    {
      title: '提供数据的机构类型',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      width: '50%',
    },
    {
      title: '最后使用时间',
      dataIndex: 'userTime',
      key: 'userTime',
      align: 'center',
      width: '50%',
    },
  ];

  columnsKey_9 = [
    {
      title: '查询日期',
      dataIndex: 'searched_date',
      key: 'searched_date',
      align: 'center',
      width: '30%',
    },
    {
      title: '机构类型',
      dataIndex: 'searched_org',
      key: 'searched_org',
      align: 'center',
    },
    {
      title: '是否是本机构查询',
      dataIndex: 'org_self',
      key: 'org_self',
      align: 'center',
      width: '25%',
      render: text =>
        text === true ? <Tag color="#45b97c">是</Tag> : <Tag color="#a1a3a6">否</Tag>,
    },
  ];

  columnsKey_10 = [
    {
      title: '是否有信用卡',
      dataIndex: 'if_own_cc',
      key: 'if_own_cc',
      align: 'center',
    },
    {
      title: '是否有白金卡',
      dataIndex: 'if_own_wg_cc',
      key: 'if_own_wg_cc',
      align: 'center',
    },
    {
      title: '是否有车',
      dataIndex: 'if_own_car',
      key: 'if_own_car',
      align: 'center',
    },
    {
      title: '是否购买保险产品',
      dataIndex: 'if_pay_ins',
      key: 'if_pay_ins',
      align: 'center',
    },
    {
      title: '是否购买理财产品',
      dataIndex: 'if_fin_buy_pre6',
      key: 'if_fin_buy_pre6',
      align: 'center',
    },
    {
      title: '消费能力指数',
      dataIndex: 'cst_score_finally',
      key: 'cst_score_finally',
      align: 'center',
    },
  ];

  columnsKey_11 = [
    {
      title: '注册APP统计',
      children: [
        {
          title: 'APP类型',
          dataIndex: 'label',
          key: 'label',
          align: 'center',
        },
        {
          title: '注册数量',
          dataIndex: 'count',
          key: 'count',
          align: 'center',
        },
      ],
    },
  ];

  columnsKey_12 = [
    {
      title: '黑名单详细信息',
      children: [
        {
          title: '最大逾期天数',
          dataIndex: 'maxDay',
          key: 'maxDay',
          align: 'center',
        },
        {
          title: '性别',
          dataIndex: 'sex',
          key: 'sex',
          align: 'center',
        },
        {
          title: '累计已还金额',
          dataIndex: 'repaidMoney',
          key: 'repaidMoney',
          align: 'center',
        },
        {
          title: '累计借入本金',
          dataIndex: 'borrowMoney',
          key: 'borrowMoney',
          align: 'center',
        },
      ],
    },
  ];

  handleBadSocre = socre => {
    if (socre > 0 && socre < 200) {
      return '嫌疑';
    }
    if (socre >= 200 && socre < 300) {
      return '吸毒';
    }
    if (socre >= 300 && socre < 400) {
      return '前科';
    }
    if (socre >= 400 && socre < 500) {
      return '涉案';
    }
    if (socre >= 500 && socre < 600) {
      return '失信';
    }
    if (socre >= 600) {
      return '正常';
    }
  };

  handleTimestampToTime = timestamp => {
    if (!timestamp) {
      return;
    }
    const dates = new Date(Number(timestamp));
    const year = 1900 + dates.getYear();
    const month = '0' + (dates.getMonth() + 1);
    const date = '0' + dates.getDate();
    const hour = '0' + dates.getHours();
    const minute = '0' + dates.getMinutes();
    const second = '0' + dates.getSeconds();
    return (
      year +
      '-' +
      month.substring(month.length - 2, month.length) +
      '-' +
      date.substring(date.length - 2, date.length) +
      ' ' +
      hour.substring(hour.length - 2, hour.length) +
      ':' +
      minute.substring(minute.length - 2, minute.length) +
      ':' +
      second.substring(second.length - 2, second.length)
    );
  };

  handleOpposeCheatVerify = () => {
    const { apply: { opposeCheatList, loadThirdPartyDataLoading } } = this.props;
    return loadThirdPartyDataLoading ? (
      <div className={styles.spinContainer}>
        <Spin size="large" />
      </div>
    ) : (
      <div>
        {!opposeCheatList ? (
          <div style={{ textAlign: 'center' }}>暂无数据</div>
        ) : (
          <div>
            {opposeCheatList.appealList && (
              <Card title="涉诉情况">
                <Table
                  pagination={false}
                  columns={this.columnsKey_1}
                  dataSource={opposeCheatList.appealList}
                  size="middle"
                  bordered
                />
              </Card>
            )}
            {opposeCheatList.sociality && (
              <Card title="社交特征">
                <Card type="inner" title="基本社交特征">
                  <Form layout="inline">
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={12} sm={24}>
                        <FormItem label="灰度分" />
                      </Col>
                      <Col md={12} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            <Tag color="#ef4136">{opposeCheatList.sociality.grayScore}</Tag>(总分100,10分以下为高危人群)
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={12} sm={24}>
                        <FormItem label="社会活跃度" />
                      </Col>
                      <Col md={12} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {opposeCheatList.sociality.socialLiveness}
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={12} sm={24}>
                        <FormItem label="社交影响力" />
                      </Col>
                      <Col md={12} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {opposeCheatList.sociality.socialInfluence}
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={12} sm={24}>
                        <FormItem label="是否种子号" />
                      </Col>
                      <Col md={12} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {opposeCheatList.sociality.hasReport == true ? (
                              <Tag color="#45b97c">是</Tag>
                            ) : (
                              <Tag color="#a1a3a6">否</Tag>
                            )}
                            (是否成功产生过蜂蜜报告)
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={12} sm={24}>
                        <FormItem label="最近活跃时间" />
                      </Col>
                      <Col md={12} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {this.handleTimestampToTime(opposeCheatList.sociality.recentactivetime)}
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={12} sm={24}>
                        <FormItem label="被标记的黑名单分类" />
                      </Col>
                      <Col md={12} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {opposeCheatList.sociality &&
                            opposeCheatList.sociality.blacklistcategory == '' ? (
                              ''
                            ) : (
                              <Tag color="#ef4136">
                                {opposeCheatList.sociality.blacklistcategory}
                              </Tag>
                            )}
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={12} sm={24}>
                        <FormItem label="姓名和手机是否在黑名单" />
                      </Col>
                      <Col md={12} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {opposeCheatList.sociality.blacklist_name_with_phone == true ? (
                              <Tag color="#45b97c">是</Tag>
                            ) : (
                              <Tag color="#a1a3a6">否</Tag>
                            )}
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={12} sm={24}>
                        <FormItem label="姓名和手机黑名单更新时间" />
                      </Col>
                      <Col md={12} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {opposeCheatList.sociality.blacklist_update_time_name_phone}
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={12} sm={24}>
                        <FormItem label="身份证和姓名是否在黑名单" />
                      </Col>
                      <Col md={12} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {opposeCheatList.sociality.blacklist_name_with_idcard == true ? (
                              <Tag color="#45b97c">是</Tag>
                            ) : (
                              <Tag color="#a1a3a6">否</Tag>
                            )}
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={12} sm={24}>
                        <FormItem label="身份证和姓名黑名单信息更新时间" />
                      </Col>
                      <Col md={12} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {opposeCheatList.sociality.blacklist_update_time_name_idcard}
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                  </Form>
                  <Table
                    pagination={false}
                    columns={this.columnsKey_12}
                    dataSource={opposeCheatList.blackDetailsList}
                    size="middle"
                    bordered
                  />
                </Card>
              </Card>
            )}

            <Card title="手机存疑">
              <Table
                pagination={false}
                columns={this.columnsKey_3}
                dataSource={opposeCheatList.userIphoneList}
                size="middle"
              />
              <Table
                pagination={false}
                columns={this.columnsKey_4}
                dataSource={opposeCheatList.userIdCardList}
                size="middle"
              />
              <Table
                pagination={false}
                columns={this.columnsKey_5}
                dataSource={opposeCheatList.iphoneInstitutionList}
                size="middle"
              />
            </Card>
            <Card title="身份存疑">
              <Table
                pagination={false}
                columns={this.columnsKey_6}
                dataSource={opposeCheatList.idCradMsgList}
                size="middle"
              />
              <Table
                pagination={false}
                columns={this.columnsKey_7}
                dataSource={opposeCheatList.userIdcradIphoneList}
                size="middle"
              />
              <Table
                pagination={false}
                columns={this.columnsKey_8}
                dataSource={opposeCheatList.identityInstitutionList}
                size="middle"
              />
            </Card>
            <Card title="机构历史查询">
              <Card>
                <Form layout="inline">
                  <FormItem label="查询机构数">
                    <span className="ant-form-text">
                      <Tag color="#FFB90F">
                        {opposeCheatList.institutionHistory &&
                          opposeCheatList.institutionHistory.institutionNum}
                      </Tag>
                      (历史查询机构统计-已去重)
                    </span>
                  </FormItem>
                </Form>
                <Divider />
                <Table
                  pagination={false}
                  columns={this.columnsKey_9}
                  dataSource={opposeCheatList.queryHistoryMessageList}
                  size="middle"
                />
              </Card>
            </Card>
            <Card title="查询历史">
              <div className={styles.tableListForm}>
                {opposeCheatList.user_searched_history_by_day &&
                  this.renderSimpleFormDiv_7(opposeCheatList.user_searched_history_by_day)}
              </div>
              {this.state.queryHistoryDetails && (
                <Card type="inner" title="历史查询">
                  <Form layout="inline">
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={8} sm={24}>
                        <FormItem label="查询次数" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {this.state.queryHistoryDetails.cnt}
                          </span>
                        </FormItem>
                      </Col>
                      <Col md={8} sm={24}>
                        <FormItem label="查询机构数" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {this.state.queryHistoryDetails.cnt_cash}
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={8} sm={24}>
                        <FormItem label="现金贷查询次数" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {this.state.queryHistoryDetails.cnt_cc}
                          </span>
                        </FormItem>
                      </Col>
                      <Col md={8} sm={24}>
                        <FormItem label="现金贷查询机构数" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {this.state.queryHistoryDetails.cnt_cf}
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={8} sm={24}>
                        <FormItem label="消费分期查询次数" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {this.state.queryHistoryDetails.cnt_org}
                          </span>
                        </FormItem>
                      </Col>
                      <Col md={8} sm={24}>
                        <FormItem label="消费分期查询机构数" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {this.state.queryHistoryDetails.cnt_org_cash}
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={8} sm={24}>
                        <FormItem label="信用卡代还查询次数" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {this.state.queryHistoryDetails.cnt_org_cc}
                          </span>
                        </FormItem>
                      </Col>
                      <Col md={8} sm={24}>
                        <FormItem label="信用卡代还查询机构数" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {this.state.queryHistoryDetails.cnt_org_cf}
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Divider />
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={18} sm={24}>
                        <FormItem label="查询次数在总体查询分布中的百分位" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem style={{ textAlign: 'right' }}>
                          <span className="ant-form-text">
                            {Number(this.state.queryHistoryDetails.pct_cnt_all * 100).toFixed(2)}%
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={18} sm={24}>
                        <FormItem label="查询机构数在总体查询分布中的百分位" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {Number(this.state.queryHistoryDetails.pct_cnt_cash * 100).toFixed(2)}%
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={18} sm={24}>
                        <FormItem label="查询次数在现金贷查询分布中的百分位" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {Number(this.state.queryHistoryDetails.pct_cnt_cc * 100).toFixed(2)}%
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={18} sm={24}>
                        <FormItem label="查询机构数在现金贷查询分布中的百分位" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {Number(this.state.queryHistoryDetails.pct_cnt_cf * 100).toFixed(2)}%
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={18} sm={24}>
                        <FormItem label="查询次数在消费分期查询分布中的百分位" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {Number(this.state.queryHistoryDetails.pct_cnt_org_all * 100).toFixed(
                              2
                            )}%
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={18} sm={24}>
                        <FormItem label="查询机构数在消费分期查询分布中的百分位" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {Number(this.state.queryHistoryDetails.pct_cnt_org_cash * 100).toFixed(
                              2
                            )}%
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={18} sm={24}>
                        <FormItem label="查询次数在信用卡代还查询分布中的百分位" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {Number(this.state.queryHistoryDetails.pct_cnt_org_cc * 100).toFixed(2)}%
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={18} sm={24}>
                        <FormItem label="查询机构数在信用卡代还查询分布中的百分位" />
                      </Col>
                      <Col md={4} sm={24}>
                        <FormItem>
                          <span className="ant-form-text">
                            {Number(this.state.queryHistoryDetails.pct_cnt_org_cf * 100).toFixed(2)}%
                          </span>
                        </FormItem>
                      </Col>
                    </Row>
                  </Form>
                </Card>
              )}
            </Card>

            <Card title="注册信息">
              <Form layout="inline">
                <FormItem label="注册APP数量">
                  <span className="ant-form-text">
                    <Tag color="#FFB90F">
                      {opposeCheatList.user_register_orgs &&
                        opposeCheatList.user_register_orgs.register_cnt}
                    </Tag>
                  </span>
                </FormItem>
              </Form>
              <Divider />
              <Table
                pagination={false}
                columns={this.columnsKey_11}
                dataSource={
                  opposeCheatList.user_register_orgs &&
                  opposeCheatList.user_register_orgs.register_orgs_statistics
                }
                size="middle"
                bordered
              />
            </Card>
            {opposeCheatList.consumer_label && (
              <Card title="消费标签信息">
                <Form layout="inline">
                  <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={8} sm={24}>
                      <FormItem label="是否有信用卡" />
                    </Col>
                    <Col md={4} sm={24}>
                      <FormItem>
                        <span className="ant-form-text">
                          {opposeCheatList.consumer_label.if_own_wg_cc == '0' ? (
                            <Tag color="#a1a3a6">
                              {stateArray[opposeCheatList.consumer_label.if_own_cc]}
                            </Tag>
                          ) : (
                            <Tag color="#45b97c">
                              {stateArray[opposeCheatList.consumer_label.if_own_cc]}
                            </Tag>
                          )}
                        </span>
                      </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                      <FormItem label="是否有白金卡" />
                    </Col>
                    <Col md={4} sm={24}>
                      <FormItem>
                        <span className="ant-form-text">
                          {opposeCheatList.consumer_label.if_own_wg_cc == '0' ? (
                            <Tag color="#a1a3a6">
                              {stateArray[opposeCheatList.consumer_label.if_own_wg_cc]}
                            </Tag>
                          ) : (
                            <Tag color="#45b97c">
                              {stateArray[opposeCheatList.consumer_label.if_own_wg_cc]}
                            </Tag>
                          )}
                        </span>
                      </FormItem>
                    </Col>
                  </Row>
                  <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={8} sm={24}>
                      <FormItem label="是否有车" />
                    </Col>
                    <Col md={4} sm={24}>
                      <FormItem>
                        <span className="ant-form-text">
                          {opposeCheatList.consumer_label.if_own_wg_cc == '0' ? (
                            <Tag color="#a1a3a6">
                              {stateArray[opposeCheatList.consumer_label.if_own_car]}
                            </Tag>
                          ) : (
                            <Tag color="#45b97c">
                              {stateArray[opposeCheatList.consumer_label.if_own_car]}
                            </Tag>
                          )}
                        </span>
                      </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                      <FormItem label="是否购买保险产品" />
                    </Col>
                    <Col md={4} sm={24}>
                      <FormItem>
                        <span className="ant-form-text">
                          {opposeCheatList.consumer_label.if_own_wg_cc == '0' ? (
                            <Tag color="#a1a3a6">
                              {stateArray[opposeCheatList.consumer_label.if_pay_ins]}
                            </Tag>
                          ) : (
                            <Tag color="#45b97c">
                              {stateArray[opposeCheatList.consumer_label.if_pay_ins]}
                            </Tag>
                          )}
                        </span>
                      </FormItem>
                    </Col>
                  </Row>
                  <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={8} sm={24}>
                      <FormItem label="是否购买理财产品" />
                    </Col>
                    <Col md={4} sm={24}>
                      <FormItem>
                        <span className="ant-form-text">
                          {opposeCheatList.consumer_label.if_own_wg_cc == '0' ? (
                            <Tag color="#a1a3a6">
                              {stateArray[opposeCheatList.consumer_label.if_fin_buy_pre6]}
                            </Tag>
                          ) : (
                            <Tag color="#45b97c">
                              {stateArray[opposeCheatList.consumer_label.if_fin_buy_pre6]}
                            </Tag>
                          )}
                        </span>
                      </FormItem>
                    </Col>
                    <Col md={8} sm={24}>
                      <FormItem label="消费能力指数" />
                    </Col>
                    <Col md={4} sm={24}>
                      <FormItem>
                        <span className="ant-form-text">
                          {opposeCheatList.consumer_label.cst_score_finally}
                        </span>
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </Card>
            )}
          </div>
        )}
      </div>
    );
  };

  render() {
    return <Row>{this.handleOpposeCheatVerify()}</Row>;
  }
}
// {/* <Panel header="公安不良信息" key="2" style={customPanelStyle}>
//           <div>
//             <Row gutter={16} type="flex" justify="space-around" align="middle">
//               <Col span={12}>
//                 <Card >
//                   <Row gutter={16}>
//                     <Col span={5}>
//                       <span>
//                         {opposeCheatList.badScore >= 600 ?
//                           <Tag color="#45b97c">{opposeCheatList.badScore == 0 ? 0 : opposeCheatList.badScore}分</Tag>
//                           :
//                           <Tag color="#ef4136">{opposeCheatList.badScore == 0 ? 0 : opposeCheatList.badScore}分</Tag>
//                         }
//                       </span>
//                     </Col>
//                     <Col span={14}>
//                       <span>{this.handleBadSocre(opposeCheatList.badScore)}</span>
//                     </Col>
//                   </Row>
//                 </Card>
//               </Col>
//               <Col span={12}>
//                 <span>
//                   {'>0 [嫌疑] < 200'}
//                   <br />
//                   {'>=200 [吸毒] < 300'}
//                   <br />
//                   {'>=300 [前科] < 400'}
//                   <br />
//                   {'>=400 [涉案] < 500'}
//                   <br />
//                   {'>=500 [失信] < 600'}
//                   <br />
//                   {'>=600 [正常]'}
//                 </span>
//               </Col>
//             </Row>
//           </div>
//         </Panel> */}
